<template>
  <div style="position: relative">
    <div class="bank">
      <Spin fix style="width:100%;height:100%;" size="large" v-if="spinShow"></Spin>
      <Col :span="7">
        <Form :model="Form" ref="form" :label-width="90" style="margin-top: 20px" :rules="rules">
          <FormItem label="见证宝编号">
            <span>{{ witness }}</span>
          </FormItem>
          <FormItem label="账户类型" prop="bank_type">
            <i-select @on-change="hanleGetIdType" v-model.number="Form.bank_type">
              <i-option :value="2">对私</i-option>
              <i-option :value="1">对公</i-option>
            </i-select>
          </FormItem>
          <FormItem label="证件类型" prop="id_type">
            <Select v-model.number="Form.id_type">
              <i-option v-for="item in typs" :key="item.id_type" :value="item.id_type">{{ item.name_type }}</i-option>
            </Select>
          </FormItem>
          <FormItem label="证件号码" prop="number">
            <Input v-model="Form.number" placeholder="请填写证件号码"></Input>
          </FormItem>
          <FormItem label="鉴权类别" prop="ValidType" v-if="Form.bank_type === 2">
            <RadioGroup v-model.number="Form.ValidType">
              <Radio :label="2">短信鉴权</Radio>
              <Radio :label="1">打款鉴权</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem label="银行类别" prop="BankType">
            <RadioGroup v-model.number="Form.BankType" @on-change="(v) => {
                if (v === 0) { this.Form.bank_name = ''; this.Form.sub_bank = ''; }
              }">
              <Radio :label="0">平安银行</Radio>
              <Radio :label="1">他行</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem label="持卡人名称" prop="name">
            <Input v-model="Form.name" placeholder="请填写持卡人名称"></Input>
          </FormItem>
          <FormItem label="银行卡号" prop="bank_number">
            <Input v-model="Form.bank_number" placeholder="请填写银行卡号"></Input>
          </FormItem>
          <FormItem label="预留电话" prop="phone">
            <Input v-model.number="Form.phone" placeholder="需与银行预留电话一致" :maxlength="11"></Input>
          </FormItem>
          <FormItem label="银行名称" v-if="Form.BankType == 1" prop="bank_name">
            <Select v-model="Form.bank_name" filterable>
              <i-option v-for="item in BankName" :key="item.bankCode" :value="item.bankCode">{{ item.bank_short }}</i-option>
            </Select>
          </FormItem>
          <FormItem label="支行名称" v-if="Form.BankType == 1" prop="sub_bank">
            <Select filterable remote :remote-method="telnetSearch" :loading="loading" v-model="Form.sub_bank">
              <i-option v-for="item in options" :key="item.bankno" :value="item.bankno">{{ item.bankname }}</i-option>
            </Select>
          </FormItem>
        </Form>
        <div v-if="show">
          <i-button type="primary" style="float:right" @click="handleSubMit" v-if="show !== 2" :loading="btnLoading">确认配置</i-button>
          <i-button type="error" style="float:right" @click="handleRmethod" v-if="valid === 2" :loading="btnLoading">确认解绑</i-button>
        </div>
      </Col>
      <Col :span="6" style="margin-left:50px" v-if="valid === 1">
        <Form :label-width="80" style="margin-top:20px;" :model="v_Form">
          <FormItem label="验证码" v-if="show_btn_type === 2">
            <i-input placeholder="请填写短信验证码" v-model="v_Form.code" style="display:inline-block;width:100px;"></i-input>
            <i-button type="warning" style="display:inline-block" @click="handleSubMit" :loading="btnLoading">重新发送</i-button>
          </FormItem>
          <FormItem label="验证金额" v-if="show_bind_type === 1 || show_btn_type === 1">
            <i-input placeholder="请填写打款金额" v-model="v_Form.money" style="display:inline-block;width:100px;"></i-input>
            <i-button type="warning" style="display:inline-block" @click="handleSubMit" :loading="btnLoading">重新发送</i-button>
          </FormItem>
          <i-button type="primary" style="margin-left:183px" @click="handlevalidateor">确认验证</i-button>
        </Form>
      </Col>
      <div style="clear:both;"></div>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { GetInit, GetBankName, GetIdType, GetSubBankName, BindBankSubMit, validCodeSubMit, validMoneySubMit, removeBindBank } from '@/api/basic'
  export default {
    data() {
      return {
        Form: {
          name: '',
          bank_name: '',
          BankType: 0,
          number: '',
          bank_number: '',
          sub_bank: '',
          phone: '',
          bank_type: 2,
          ValidType: 2,
          id_type: ''
        },
        v_Form: {
          code: '',
          money: ''
        },
        show_btn_type: null,
        show_bind_type: null,
        loading: false,
        spinShow: true,
        show: null,
        valid: null,
        BankName: [],
        options: [],
        witness: '',
        typs: [],
        rules: {
          name: [{ required: true, trigger: 'blur', message: '必须填写哦~' }],
          number: [{ required: true, trigger: 'blur', message: '必须填写哦~' }],
          bank_number: [{ required: true, trigger: 'blur', message: '必须填写哦~' }],
          sub_bank: [{ required: true, trigger: 'blur', message: '必须填写哦~' }],
          phone: [{ required: true, type: 'number', message: '电话必须填写哦~', trigger: 'blur' }],
          bank_name: [{ required: true, message: '必须选择一个哟~', trigger: 'change' }],
          BankType: [{ required: true, type: 'number', message: '必须选择一个哟~', trigger: 'change' }],
          bank_type: [{ required: true, type: 'number', message: '必须选择一个哟~', trigger: 'change' }],
          ValidType: [{ required: true, type: 'number', message: '必须选择一个哟~', trigger: 'change' }],
          id_type: [{ required: true, type: 'number', message: '必须选择一个哟~', trigger: 'change' }]
        },
        btnLoading: false
      }
    },
    methods: {
      init() {
        this.spinShow = true
        GetBankName().then(response => {
          this.BankName = response.data.data
        }),
        GetIdType(this.Form.bank_type).then(response => {
          this.typs = response.data.data
        }),
        GetInit(this.id).then(response => {
          if (response.data.code === 0) {
              this.options.push(response.data.data.sub_bank)
              this.witness = response.data.data.witness
              this.Form.BankType = response.data.data.bank_category
              this.Form.bank_type = response.data.data.public_private
              this.show_bind_type = response.data.data.public_private
              this.Form.id_type = response.data.data.id_type
              this.Form.number = response.data.data.number
              this.Form.bank_number = response.data.data.bank_number
              this.Form.name = response.data.data.account_name
              this.Form.bank_name = response.data.data.bank_account
              this.Form.phone = response.data.data.contact_phone
              this.show = response.data.data.bind_bank_status
              this.valid = response.data.data.auth_status
              this.Form.ValidType = response.data.data.authentication_status
              this.show_btn_type = response.data.data.authentication_status
              setTimeout(() => {
                this.Form.sub_bank = response.data.data.sub_bank.bankno
              }, 1000)
              this.spinShow = false
          } else {
            this.$Message.error(response.data.message)
          }
        })
        this.btnLoading = false
      },
      telnetSearch(query) {
        if (query !== '') {
          this.loading = true
          setTimeout(() => {
            GetSubBankName(query).then(response => {
              if (response.data.code === 0) {
                this.options = response.data.data
                this.loading = false            
              } else {
                this.$Message.error(response.data.message)
              }
            })
          }, 200);
        } else {
          this.options = []
        }
      },
      hanleGetIdType() {
        GetIdType(this.Form.bank_type).then(response => {
          this.typs = response.data.data
        })
      },
      handleSubMit() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.btnLoading = true
            BindBankSubMit(this.id, this.Form).then(response => {
              if (response.data.code === 0) {
                this.$Message.success('操作成功')
                this.init()
                this.btnLoading = false
              } else {
                this.$Message.error('操作失败')
                this.btnLoading = false
              }
            })
          }
        })
      },
      handlevalidateor() {
        if (this.Form.bank_type === 2) {
          if(this.Form.ValidType === 2) {
            validCodeSubMit(this.id, this.v_Form.code).then(response => {
              if (response.data.code === 0) {
                this.$Message.success(response.data.message)
                this.init()
              } else {
                this.$Message.error(response.data.message)
              }
            })
          } else if(this.Form.ValidType === 1){
            validMoneySubMit(this.id, this.v_Form.money).then(response => {
              if (response.data.code === 0) {
                this.$Message.success(response.data.message)
                this.init()
              } else {
                this.$Message.error(response.data.message)
              }
            })
          }
        } else if (this.Form.bank_type === 1) {
          validMoneySubMit(this.id, this.v_Form.money).then(response => {
            if (response.data.code === 0) {
              this.$Message.success(response.data.message)
              this.init()
            } else {
              this.$Message.error(response.data.message)
            }
          })
        }
      },
      handleRmethod() {
        this.btnLoading = true
        removeBindBank(this.id).then(response => {
          if (response.data.code === 0) {
            this.$Message.success(response.data.message)
            this.init()
            this.btnLoading = false
          } else {
            this.$Message.error(response.data.message)
            this.btnLoading = false
          }
        })
      }
    },
    mounted() {
      this.init()
    },
    computed: {
      ...mapGetters([
        'id'
      ])
    }
  }
</script>
